<!-- 组合式 -->
<script setup>
// 编号	姓名	年龄	性别	联系方式	教学班级
// 引用 api
import { ref } from 'vue'

// 模拟数据库的数据
const initTeachers = [
  {
    id: 1,
    teacherName: '张三',
    teacherAge: 18,
    teacherSex: '男',
    phone: '10087',
    className: '全栈技术2班',
  },
  {
    id: 2,
    teacherName: '李四',
    teacherAge: 18,
    teacherSex: '男',
    phone: '10087',
    className: '全栈技术2班',
  },
  {
    id: 3,
    teacherName: '王五',
    teacherAge: 18,
    teacherSex: '男',
    phone: '10087',
    className: '全栈技术2班',
  },
  {
    id: 4,
    teacherName: '老六',
    teacherAge: 18,
    teacherSex: '男',
    phone: '10087',
    className: '全栈技术2班',
  },
  {
    id: 5,
    teacherName: '刘七',
    teacherAge: 18,
    teacherSex: '女',
    phone: '10087',
    className: '全栈技术2班',
  },
]

// 新增或修改模块状态
const isShow = ref(false)

// 查询提示显示
const tipsIsShow = ref(false)

// 老师对象
const teacher = ref({
  id: null,
  teacherName: null,
  teacherAge: null,
  teacherSex: null,
  phone: null,
  className: null,
})

// 查询关键词
const keyWord = ref('')

// 新增 或 修改操作
const operate = ref('新增')

// 老师列表
const teachers = ref(initTeachers)

// 添加显示函数
function add() {
  // 修改操作状态
  operate.value = '新增'

  // 清空内容
  teacher.value = {
    id: null,
    teacherName: null,
    teacherAge: null,
    teacherSex: null,
    phone: null,
    className: null,
  }

  // 显示新增或修改模块
  isShow.value = true
}

// 查询函数
function queryTeacher() {
  // 查询的关键词
  const trimKeyWord = keyWord.value.trim()

  // 判断内容是否为空
  if (trimKeyWord === '') {
    // 拿到原始数据
    teachers.value = initTeachers
    // 显示提示
    tipsIsShow.value = false
    return
  } else {
    // 查询是否有包含关键词的老师
    const result = initTeachers.filter(
      (item) =>
        item.teacherName.toLowerCase().includes(trimKeyWord.toLowerCase()) ||
        item.teacherAge.toString().includes(trimKeyWord) ||
        item.teacherSex.includes(trimKeyWord) ||
        item.phone.includes(trimKeyWord) ||
        item.className.toLowerCase().includes(trimKeyWord.toLowerCase())
    )

    // 查询到的内容
    if (result.length !== 0) {
      // 拿到查询的数据
      teachers.value = result
      // 显示提示
      tipsIsShow.value = false
    } else {
      // 隐藏提示
      tipsIsShow.value = true
    }
  }
}

// 保存按钮
function save() {
  if (operate.value === '新增') {
    // 添加老师
    const obj = teacher.value

    // 修改 id
    obj.id = teachers.value[teachers.value.length - 1].id + 1

    // 判断是否都有内容
    for (const key in obj) {
      if (obj[key] === null) {
        return alert('请输入内容')
      }
    }

    // 添加老师
    initTeachers.push(obj)

    // 同步老师列表
    teachers.value = initTeachers

    // 提示成功
    alert('新增成功')
  } else {
    // 获取老师的索引
    const teacherIndex = teachers.value.findIndex((item) => item.id === teacher.value.id)

    // 修改老师信息
    teachers.value[teacherIndex] = teacher.value

    // 修改成功
    alert('修改成功')
  }

  // 隐藏
  isShow.value = false
}

// 取消按钮
function cancel() {
  // 隐藏
  isShow.value = false

  // 清空内容
  teacher.value = {
    id: null,
    teacherName: null,
    teacherAge: null,
    teacherSex: null,
    phone: null,
    className: null,
  }
}

// 修改函数
function update(id) {
  operate.value = '保存'

  // 获取老师的索引
  const teacherIndex = teachers.value.findIndex((item) => item.id === id)

  // 显示老师信息
  teacher.value = {
    id: teachers.value[teacherIndex].id,
    teacherName: teachers.value[teacherIndex].teacherName,
    teacherAge: teachers.value[teacherIndex].teacherAge,
    teacherSex: teachers.value[teacherIndex].teacherSex,
    phone: teachers.value[teacherIndex].phone,
    className: teachers.value[teacherIndex].className,
  }

  // 显示新增修改模块
  isShow.value = true
}

// 删除函数
function del(id) {
  // 是否删除
  if (confirm('确认删除')) {
    // 获取老师的索引
    const teacherIndex = teachers.value.findIndex((item) => item.id === id)
    // 删除老师
    teachers.value.splice(teacherIndex, 1)
  }
}
</script>

<template>
  <!-- 大盒子 -->
  <div class="content">
    <!-- 新增和修改 -->
    <div id="AddOrModify" v-show="isShow">
      <form>
        <table>
          <tbody>
            <tr>
              <th>姓名：</th>
              <th>
                <input
                  type="text"
                  placeholder="请输入姓名"
                  v-model="teacher.teacherName"
                  required
                />
              </th>

              <th>年龄：</th>
              <th>
                <input type="text" placeholder="请输入年龄" v-model="teacher.teacherAge" required />
              </th>
            </tr>

            <tr>
              <th>性别：</th>
              <th>
                <input type="text" placeholder="请输入性别" v-model="teacher.teacherSex" required />
              </th>

              <th>联系方式：</th>
              <th>
                <input type="text" placeholder="请输入联系方式" v-model="teacher.phone" required />
              </th>
            </tr>

            <tr>
              <th>教学班级：</th>
              <th>
                <input
                  type="text"
                  placeholder="请输入教学班级"
                  v-model="teacher.className"
                  required
                />
              </th>

              <th colspan="2">
                <input type="button" v-model="operate" @click="save" />
                <input type="button" value="取消" @click="cancel" />
              </th>
            </tr>
          </tbody>
        </table>
      </form>
    </div>

    <!-- 老师列表 -->
    <div id="teacherList">
      <input type="button" value="新增" @click="add" />
      <input type="text" placeholder="请输入关键词" v-model="keyWord" />
      <input type="button" value="查询" @click="queryTeacher" />
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>联系方式</th>
            <th>教学班级</th>
            <th>操作</th>
          </tr>
        </thead>

        <tbody v-if="tipsIsShow">
          <tr>
            <td colspan="7">未找到匹配的老师</td>
          </tr>
        </tbody>

        <tbody v-if="!tipsIsShow">
          <tr v-for="teacher in teachers" :key="teacher.id">
            <td>{{ teacher.id }}</td>
            <td>{{ teacher.teacherName }}</td>
            <td>{{ teacher.teacherAge }}</td>
            <td>{{ teacher.teacherSex }}</td>
            <td>{{ teacher.phone }}</td>
            <td>{{ teacher.className }}</td>
            <td>
              <input type="button" value="修改" @click="update(teacher.id)" />
              <input type="button" value="删除" @click="del(teacher.id)" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style>
body,
html {
  height: 100%;
  padding: 0;
  margin: 0;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#AddOrModify {
  width: 100%;
  height: 30%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

#AddOrModify th {
  border: 0;
}

#AddOrModify form {
  padding: 5px;
  border-radius: 5px;
  border: 1px salmon solid;
}

#AddOrModify th {
  padding: 10px;
  color: rgb(239 165 157);
}

#teacherList {
  width: 100%;
  height: 70%;
  justify-content: center;
  align-items: center;
}

input {
  margin-right: 10px;
  border: 1px salmon solid;
  background-color: rgb(239 165 157);
  padding: 5px 10px;
  color: #f7f7f7;
  border-radius: 5px;
  font-size: 16px;
}

input::placeholder {
  color: #f7f7f7;
}

input:hover {
  transition: all 0.5s;
  background-color: #e87575;
  color: #fff;
}

table {
  margin: 10px;
  border-spacing: 0;
  text-align: center;
  margin: 20px auto;
  color: rgb(250, 165, 155);
  font-size: 18px;
}

tr,
th,
td {
  border: 1px salmon solid;
  padding: 20px 40px;
}

#teacherList {
  text-align: center;
}
</style>
